<template>
    <div class="clearfix">
      <a-upload
        v-model:file-list="fileList"
        action=" https://upload-z1.qiniup.com"
        list-type="picture-card"
        @preview="handlePreview"
        :beforeUpload="beforeUpload"
        :data="obj"
        name="file"
        @change="filechange"
      >
        <div v-if="fileList.length < 1">
            <!-- //上传多少张图片 -->
          <plus-outlined />
          <div style="margin-top: 8px">上传的图片</div>
        </div>
      </a-upload>
      <a-modal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
    </div>
  </template>
  <script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue';
  import {  ref,onMounted ,reactive} from 'vue';
  import type { UploadProps } from 'ant-design-vue';

  import {tokenlist} from '@/api/token/token'
import { react } from '@babel/types';
import {defineExpose} from 'vue'
  

  function getBase64(file: File) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
  
 
      const previewVisible = ref(false);
      const previewImage = ref('');
      const previewTitle = ref('');
  
      const fileList = ref<any>([
        // {
        //   uid: '-1',
        //   name: 'image.png',
        //   status: 'done',
        //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        // },
       
      ]);
      defineExpose({        //把这个暴露 出来给父组件 然后用  ref  所有
    fileList
})
      const handleCancel = () => {
        previewVisible.value = false;
        previewTitle.value = '';
      };
      const handlePreview = async (file:any) => {
        if (!file.url && !file.preview) {
          file.preview = (await getBase64(file.originFileObj)) as string;
        }
        previewImage.value = file.url || file.preview;
        previewVisible.value = true;
        previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
      };
      const obj=reactive({
        token:'',
        key:''
    })
    onMounted(()=>{
        tokenlist().then((res:any)=>{ 
        console.log(res)
       
        obj.token=res.token
    })
    })
  function beforeUpload(e:any){
    console.log(e)
   
    
    let key= generatekey(e)
    // obj.token=token.value
    obj.key=key
    return true
  }
    function generatekey(e:any){
        console.log(e)
        let {type} = e;

       return (Math.random().toString(16).slice(2)+(+new Date())+'.'+type.split('/')[1])

    }
   const filechange=(e:any)=>{
    console.log(e)
   }
  </script>
  <style>
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  
  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  </style>
  